<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>

</head>
<body>
    <div id="app">
        <button @click="getData">获取数据</button>
    </div>
</body>

<script>
    new Vue({
        el:"#app",
        methods:{
            async getData(){
                //发送axios请求，获取后台数据
                let resp = await this.getDataApi();

                //同步阻塞接收结果
                console.log(resp.data);
            },

            getDataApi() {
                //异步请求
                return axios({
                    //请求的资源路径
                    url:"/test/res1",
                    //请求方式 get/post/put/delete
                    method:"post",
                    //路径参数  ?key=value&key2=value2   请求行中，通过？拼接在请求路径后面
                    params:{name:"张三",age:18},
                    //请求体参数  请求体中，json格式数据据，后台接收时，需要用一个@RequestBoby
                    data:{
                        id:1,
                        address:"旺田大厦",
                        info:"公司地址"
                    },
                    //请求头信息  token:jwt串
                    headers:{
                        token: "kkkkkkkkkkkkkkk"
                    }
                })
            }
        }
    });
</script>

</html>